<template>
  <view class="callPolice">

    <view style="height: 90%">
      <text style="padding: 10px 0; text-align: center; color: #fff; display: block; font-size: 24px">
        历史报警
	</text>
	    <view style="display: flex; justify-content: center; gap: 15px;height: 5%;"> 
        <u-button
           @click="routerReplace('/pages/callpoliceactive/callpoliceactive')"
          type="warning"
         style="
         width: 20%;
         height: 100%;

           border-radius: 40rpx;
           color: #fff;
           font-size: 14px;
           box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         "
        >
          返回
        </u-button>
   </view>
    <view
        style="display: flex; justify-content: center; margin: 20px; align-items: center; flex-wrap: wrap;"
      >
        <text style="margin-right: 20px; color: #fff; font-size: 32rpx;">请选择时间段 :</text>
        <u-datetime-picker :show="show" mode="date" v-model="timeValue.createTime" @confirm="selectedDate" @cancel="show = false" />
        <u-button
          style="
            width: 60%;
            background-color: #dbdbdb;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            gap: 30rpx;
            cursor: pointer;
          "
          @click="show = true"
        >
          <u-icon name="calendar" size="30rpx"  />
          <text style=" font-size: 32rpx;">{{ timeValue.createTime }}</text>
          <u-icon name="arrow-right" size="30rpx" />
        </u-button>
      </view>
      <CallPoliceList :data-list="warningData" height="85%" />
      <view
        class="example-pagination-block"
        style="display: flex; justify-content: center; margin-top: 1%"
      >
        <u-pagination
          :total="timeValue.total"
          :page-size="15"
          :current-page="timeValue.pageNo"
          @change="changePage"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { routerPush, routerReplace, routerGo } from "@/plugins/index.js";
import CallPoliceList from "@/components/callpolice/CallPoliceList.vue";
import { http } from '@/api/http.js'; 
let show =ref(false)
let nowDate = moment().format('YYYY-MM-DD');
let timeValue = reactive({
  createTime: nowDate,
  pageNo: 1,
  pageSize: 15,
  total: 15
});
let warningData = ref(null);

const getListDate = async () => {
  try {
   let res = await http("GET")("/getList", {
       ...timeValue,
     });
     warningData.value = res.offsideIPage.records;
     timeValue.total = res.offsideIPage.total;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const changePage = async (pageNo) => {
  timeValue.pageNo = pageNo;
  getListDate();
};

const selectedDate = async (e) => {
	show.value = false
 timeValue.createTime = moment(e.value).format('YYYY-MM-DD'); 
  getListDate();
};

onMounted(() => {
  getListDate();
});
</script>

<style scoped>
.callPolice {
  margin: auto auto;
  width: 100%;
  height: 100%;
  background: rgb(45, 73, 97);
}
.u-datetime-picker {
    flex: 0;
}

</style>